<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            /*
            animation:调用帧播放动画
            第一个参数 : 帧的名字
            第二个参数 : 动画的时间
            第三个参数 : 动画执行的方式
                ease :由快到慢
                linear:匀速
                ease-in : 加速
                ease-out : 减速
                ease-in-out : 先加速再减速
            第四个参数 : 延迟的时间
            第五个参数 : 播放的次数    infinite:无限次
            第六个参数 : 播放的方向
                        normal:正常播放
                        alternate:偶数次播放
            第七个参数 : 播放的状态
                        running:将暂停的动画继续播放
                        paused:将播放的动画暂停
            第八个参数 : 播放发生的操作
                        forwards:结束后应用最后一帧动画作为结束画面
                        backwards:结束后应用最初始一帧动画作为结束画面

            */
            animation: spread 2s linear infinite;
        }
        @keyframes spread {
            0%{
                width: 100px;
                transform: translate(0px,0px) rotate(0deg);
            }
            25%{
                width: 150px;
                transform: translate(100px,0px) rotate(180deg);
            }
            50%{
                width: 200px;
                transform: translate(200px,0px) rotate(360deg);
            }
            75%{
                width: 150px;
                transform: translate(100px,0px) rotate(180deg);
            }
            100%{
                width: 100px;
                transform: translate(0px,0px) rotate(0deg);
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>